<template>
    <div style="height: 350px">
        <div ref="chart" style="height: 100%;width: 100%;">

        </div>
        <div ref="chart1" style="height: 100%;width: 100%;">

        </div>
    </div>
</template>
<script>
    import {getMonthFinance,getMonthFinance1}from '@/api/financeApi'
    export default{
        data () {
            return {
                xAxis:[],
                receivables:[],
                amountReceived:[],
                xAxis1:[],
                lineData:[]
            };
        },
        methods: {
            initCharts () {
                let myChart = this.$echarts.init(this.$refs.chart);
                // 绘制图表
                myChart.setOption({
                    title: { text: '财务报表' },
                    tooltip: {},
                    xAxis: {
                        data: this.xAxis
                    },
                    yAxis: {},
                    legend: {},
                    series: [
                        {
                            name: '应收款金额',
                            type: 'bar',
                            data: this.receivables
                        },
                        {
                            name: '已收款金额',
                            type: 'bar',
                            data: this.amountReceived
                        },
                    ]
                });
            },
            initCharts1 () {
                let myChart = this.$echarts.init(this.$refs.chart1);
                // 绘制图表
                myChart.setOption({
                    title: { text: '收款率 ' },
                    xAxis: {
                        type: 'category',
                        data: this.xAxis1
                    },
                    yAxis: {
                        type: 'value'
                    },
                    legend: {},
                    series: [
                        {
                            name:'收款率',
                            data: this.lineData,
                            type: 'line'
                        }
                    ]
                });
            }
        },
        mounted () {
            getMonthFinance().then(res => {
                this.xAxis=res.data.data.xAxis
                this.receivables=res.data.data.receivables
                this.amountReceived=res.data.data.amountReceived
                this.initCharts()
            }).catch(e => {
                this.$message.error({
                    message: '抱歉，操作遇到异常，请重试或联系管理员处理'
                })
            })
            getMonthFinance1().then(res => {
                this.xAxis1=res.data.data.xAxis
                this.lineData=res.data.data.lineData
                this.initCharts1()
            }).catch(e => {
                this.$message.error({
                    message: '抱歉，操作遇到异常，请重试或联系管理员处理'
                })
            })
        }
    }
</script>
